import React, { Component } from "react";
import { NavBar, Icon, Tabs, WhiteSpace, Modal, WingBlank } from "antd-mobile";
import axios from "axios";
import { connect } from 'react-redux'
import { actionAddGoods } from '@/store/cart/actions'
import "./index.scss";

const tabs = [
  {
    title: "商品",
    key: "t1"
  },
  {
    title: "详情",
    key: "t2"
  },
  {
    title: "评价",
    key: "t3"
  }
];
class Details extends Component {
  state = {
    detailList: [],
    modal: false,
    num: 1
  };

  render() {
    /* 点击添加进购物车按钮，需要传递的商品信息 */
    let goodsInfo = {}
    let storeName = ''
    
    if (this.state.detailList.datas) {
      let aaa = this.state.detailList.datas.goods_info

      goodsInfo.goods_id = aaa.goods_id
      goodsInfo.goods_name = aaa.goods_name
      goodsInfo.goods_price = aaa.goods_price
      goodsInfo.goods_image_url = this.state.detailList.datas.spec_image[0]
      storeName = this.state.detailList.datas.store_info.store_name
    }

    return (
      <div className="hg_detaile">
        <NavBar
          mode="light"
          className="detail-top"
          icon={
            <Icon
              type="left"
              onClick={() => {
                this.props.history.goBack()
              }}
            />
          }
          onLeftClick={() => this.props.history.push("/goodsList")}
          rightContent={<Icon type="ellipsis" key="1" />}
        >
          <Tabs
            className="tabs"
            tabs={tabs}
            initialPage={0}
            tabBarPosition="top"
            tabBarActiveTextColor="red"
            renderTab={tab => <span> {tab.title} </span>}
          />
          <WhiteSpace />
        </NavBar>
        <div className="detail">
          <div className="detail-goods">
            <ul className="detail-pic">
              {this.state.detailList.datas &&
                this.state.detailList.datas.goods_commend_list.map(item => {
                  return (
                    <li key={item.goods_id}>
                      <img alt="detail" src={item.goods_image_url} />
                    </li>
                  );
                })}
            </ul>
          </div>
          <div className="detail-wrap">
            <div className="detail-name">
              <dl>
                <dt>
                  {this.state.detailList.datas &&
                    this.state.detailList.datas.goods_info.goods_name}
                </dt>
              </dl>
            </div>
            <div className="detail-price">
              <dl>
                <dt>
                  ￥
                  <em>
                    {this.state.detailList.datas &&
                      this.state.detailList.datas.goods_info
                        .goods_promotion_price}
                  </em>
                </dt>
                <span className="sold">
                  销量：
                  {this.state.detailList.datas &&
                    this.state.detailList.datas.goods_info.goods_salenum}
                  件
                </span>
              </dl>
            </div>
            <div className="detail-item">
              <div className="item-name"> 送至 </div>
              <dl className="detail-freight">
                <dt>
                  <span>
                    {this.state.detailList.datas &&
                      this.state.detailList.datas.goods_hair_info.area_name}
                  </span>
                  <strong>
                    {this.state.detailList.datas &&
                      this.state.detailList.datas.goods_hair_info.if_store_cn}
                  </strong>
                </dt>
                <dd>
                  {this.state.detailList.datas &&
                    this.state.detailList.datas.goods_hair_info.content}
                </dd>
              </dl>
            </div>
            <div className="goods-detail-item">
              <div className="itme-name">已选</div>
              <div className="item-con">
                <dl className="goods-detail-sel">
                  <dt>
                    <span>默认</span>
                  </dt>
                </dl>
              </div>
            </div>
            <div className="goods-detail-comment">
              <div className="title">
                <i>
                  商品评价
                  <span className="rate">
                    好评率<em>100%</em>
                  </span>
                  <span className="rate-num">（26人评价）</span>
                </i>
              </div>
            </div>
            <div className="goods-detail-store">
              <span>
                <div className="store-name">
                  {this.state.detailList.datas &&
                    this.state.detailList.datas.store_info.store_name}
                </div>
                <div className="store-rate">
                  <span className="high">
                    描述相符
                    <em>
                      {this.state.detailList.datas &&
                        this.state.detailList.datas.store_info.store_credit
                          .store_desccredit.credit}
                    </em>
                    <i>高</i>
                  </span>
                  <span className="high">
                    服务态度
                    <em>
                      {this.state.detailList.datas &&
                        this.state.detailList.datas.store_info.store_credit
                          .store_servicecredit.credit}
                    </em>
                    <i>
                      {this.state.detailList.datas &&
                        this.state.detailList.datas.store_info.store_credit
                          .store_servicecredit.percent_text}
                    </i>
                  </span>
                  <span className="high">
                    发货速度
                    <em>
                      {this.state.detailList.datas &&
                        this.state.detailList.datas.store_info.store_credit
                          .store_deliverycredit.credit}
                    </em>
                    <i>
                      {this.state.detailList.datas &&
                        this.state.detailList.datas.store_info.store_credit
                          .store_deliverycredit.percent_text}
                    </i>
                  </span>
                </div>
              </span>
            </div>
            <div className="goods-detail-recom">
              <h4>店铺推荐</h4>
              <ul>
                {this.state.detailList.datas &&
                  this.state.detailList.datas.goods_commend_list.map(arr => {
                    return (
                      <li key={arr.goods_id}>
                        <span>
                          <div className="pic">
                            <img src={arr.goods_image_url} alt="" />
                          </div>
                          <dl>
                            <dt>{arr.goods_name}</dt>
                            <dd>
                              ￥<em>{arr.goods_price}</em>
                            </dd>
                          </dl>
                        </span>
                      </li>
                    );
                  })}
              </ul>
            </div>
          </div>
          <div className="goods-detail-foot">
            <div className="otreh-handle">
              <span className="cart">
                <p onClick={() => this.props.history.push("/cart")}>购物车</p>
              </span>
            </div>
            <div className="buy-handle ">
              <span className="add-cart" onClick={this.showModal}>
                加入购物车
              </span>

              <span className="animation-up buy-now">立即购买</span>
            </div>
          </div>
        </div>
        <WingBlank>
          <WhiteSpace />
          <Modal
            popup
            visible={this.state.modal}
            onClose={this.onClose("modal")}
            title="gouwu"
            animationType="slide-up"
          >
            <div className="nctouch-bottom-mask-top">
              <div className="goods-pic">
                <img
                  src={
                    this.state.detailList.datas &&
                    this.state.detailList.datas.goods_commend_list[0]
                      .goods_image_url
                  }
                  alt=""
                />
              </div>
              <dl>
                <dt>
                  {this.state.detailList.datas &&
                    this.state.detailList.datas.goods_info.goods_name}
                </dt>
                <dd className="goods-price">
                  ￥
                  <em>
                    {this.state.detailList.datas &&
                      this.state.detailList.datas.goods_info
                        .goods_promotion_price}
                  </em>
                  <span className="goods-storage">
                    {this.state.detailList.datas &&
                      this.state.detailList.datas.goods_info.goods_storage}
                  </span>
                </dd>
              </dl>
            </div>
            <div className="nctouch-bottom-mask-rolling" />
            <div className="goods-option-value">
              购买数量
              <div className="value-box">
                <span className="minus" onClick={this.handleMin.bind(this)}>
                  <i>-</i>
                </span>
                <span>
                  <input
                    type="text"
                    ref="myInput"
                    pattern="[0-9]*"
                    className="buy-num"
                    value={this.state.num}
                    onChange={e => {
                      this.handleChange(e);
                    }}
                  />
                </span>
                <span className="add" onClick={this.handleAdd.bind(this)}>
                  <i>+</i>
                </span>
              </div>
            </div>
            <div className="goods-detail-foot">
              <div className="otreh-handle">
                <span className="cart">
                  <p onClick={() => this.props.history.push("/cart")}>购物车</p>
                </span>
              </div>
              <div className="buy-handle ">
                <span
                  className="add-cart"
                  onClick={() => {
                    goodsInfo.goods_num = this.state.num
                    this.props.handleAddGoods(goodsInfo, storeName, this.props)
                  }}
                >加入购物车</span>

                <span className="animation-up buy-now">立即购买</span>
              </div>
            </div>
          </Modal>
        </WingBlank>
      </div>
    );
  }
  handleMin() {
    let value = this.refs.myInput.value;

    value--;
    this.setState({
      num: value
    });
  }
  handleAdd() {
    let value = this.refs.myInput.value;
    value++;
    this.setState({
      num: value
    });
  }
  showModal = e => {
    e.preventDefault(); // 修复 Android 上点击穿透
    this.setState({
      modal: true
    });
  };
  onClose = key => () => {
    this.setState({
      [key]: false
    });
  };
  /**
   * 获取通过发现页点击进来的商品信息
   * */

  getDetails() {
    let id = this.props.match.params.id;
    axios
      .get(
        `http://www.hangowa.com/mo_bile/index.php?act=goods&op=goods_detail&goods_id=${id}&key=`
      )
      .then(response => {
        let res = response.data;
        
        if (res.code === 200) {
          this.setState({
            detailList: res
          });
        } else {
          alert("网络超时");
        }
      });
  }
  componentDidMount() {
    this.getDetails();
  }
}

export default connect(
  null,
  dispatch => ({
    handleAddGoods(goodsInfo, storeName, props) {
      dispatch(actionAddGoods(goodsInfo, storeName, props))
    }
  })
)(Details)
